<template>
  <div class="user-edit">
    <ht-header>编辑资料</ht-header>
    <!-- 头像 -->
    <div class="avatar">
      <img :src="$axios.defaults.baseURL + user.head_img" alt="" />
      <van-uploader :after-read="afterRead" />
    </div>
    <!-- 导航 -->
    <ht-navitem @click="showNickname">
      <template>昵称</template>
      <template #content>{{ user.nickname }}</template>
    </ht-navitem>
    <ht-navitem @click="showPassword">
      <template>密码</template>
      <template #content>******</template>
    </ht-navitem>
    <ht-navitem @click="showGender">
      <template>性别</template>
      <template #content>{{ user.gender === 1 ? '男' : '女' }}</template>
    </ht-navitem>

    <!-- 渲染dialog组件 -->
    <van-dialog
      v-model="isShowNickname"
      title="编辑昵称"
      show-cancel-button
      @confirm="updateNickname"
    >
      <van-field v-model="nickname" placeholder="请输入用户名" ref="nickname" />
    </van-dialog>
    <van-dialog
      v-model="isShowPassword"
      title="修改密码"
      show-cancel-button
      @confirm="updatePassword"
    >
      <van-field v-model="password" placeholder="请输入密码" ref="password" />
    </van-dialog>
    <van-dialog
      v-model="isShowGender"
      title="修改性别"
      show-cancel-button
      @confirm="updateGender"
    >
      <van-radio-group v-model="gender">
        <van-cell-group>
          <van-cell title="男" clickable @click="gender = 1">
            <template #right-icon>
              <van-radio :name="1" />
            </template>
          </van-cell>
          <van-cell title="女" clickable @click="gender = 0">
            <template #right-icon>
              <van-radio :name="0" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-dialog>
    <!-- 裁剪的模态框 -->
    <div class="mask" v-show="isShowMask">
      <van-button type="primary" class="crop" @click="crop">裁剪</van-button>
      <van-button type="danger" class="cancel" @click="isShowMask = false"
        >取消</van-button
      >
      <VueCropper
        ref="aa"
        :img="img"
        autoCrop
        autoCropWidth="100"
        autoCropHeight="100"
        fixed
      ></VueCropper>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
export default {
  components: {
    VueCropper,
  },
  created() {
    this.getUserInfo()
  },
  data() {
    return {
      user: '',
      isShowNickname: false,
      isShowPassword: false,
      isShowGender: false,
      nickname: '',
      password: '',
      gender: 1,
      url: '',
      img: '',
      // 是否显示裁剪框
      isShowMask: false,
    }
  },
  methods: {
    crop() {
      this.$refs.aa.getCropBlob(async (blob) => {
        // console.log(data)
        // 此时可以自行将文件上传至服务器  file.file
        // console.log('文件读取完毕', file)
        // 发送请求，上传文件
        // 如果是通过ajax上传文件，请求体不能直接是一个普通对象，必须是一个formData对象
        // 创建一个空的formData对象
        const fd = new FormData()
        // 给formData对象添加上传的文件
        fd.append('file', blob)
        const res = await this.$axios.post('/upload', fd)
        const { statusCode, data } = res.data
        if (statusCode === 200) {
          console.log(data.url)
          // 修改用户头像
          this.updateUser({
            head_img: data.url,
          })
        }
        // 隐藏裁剪框
        this.isShowMask = false
      })
    },
    isImg(name) {
      if (
        name.endsWith('.gif') ||
        name.endsWith('.jpg') ||
        name.endsWith('.png') ||
        name.endsWith('.jpeg')
      ) {
        return true
      } else {
        return false
      }
    },
    async afterRead(file) {
      // 文件读取完毕
      // 此时可以自行将文件上传至服务器
      // console.log(file)
      // 这里校验一下图片的类型和大小
      // if (!this.isImg(file.file.name)) {
      //   this.$toast.fail('请上传图片')
      // }
      if (!this.isImg(file.file.name)) {
        return this.$toast.fail('请上传图片')
      }
      if (file.file.size >= 400 * 1024) {
        return this.$toast.fail('上传图片太大')
      }
      // 显示裁剪框
      this.isShowMask = true
      // 设置裁剪的图片
      this.img = file.content
    },
    async updateUser(data) {
      // console.log(1111)
      const userId = localStorage.getItem('userId')
      const res = await this.$axios.post(`/user_update/${userId}`, data)
      const { statusCode } = res.data
      if (statusCode === 200) {
        this.getUserInfo()
        this.$toast.success('修改成功')
      }
    },
    async updateGender() {
      this.updateUser({ gender: this.gender })
    },
    async updatePassword() {
      this.updateUser({ password: this.password })
    },
    async updateNickname() {
      this.updateUser({ nickname: this.nickname })
    },
    async getUserInfo() {
      const userId = localStorage.getItem('userId')
      const res = await this.$axios.get(`/user/${userId}`)
      // console.log(res)
      const { statusCode, data } = res.data
      if (statusCode === 200) {
        this.user = data
      }
    },
    showNickname() {
      // 这里是让输入框显示
      this.isShowNickname = true
      // 这里是让输入框回显数据
      this.nickname = this.user.nickname
      // 自动获取焦点
      // await this.$nextTick()
      //  this.$refs.nickname.focus()
      this.$nextTick().then(() => {
        this.$refs.nickname.focus()
      })
    },
    async showPassword() {
      // 这里是让输入框显示
      this.isShowPassword = true
      // 这里是让输入框回显数据
      this.password = this.user.password
      // console.log(22)
      // 自动获取焦点
      await this.$nextTick()
      this.$refs.password.focus()
      // this.$nextTick().then(() => {
      //   this.$refs.password.focus()
      // })
    },
    showGender() {
      // 这里是让输入框显示
      this.isShowGender = true
      // 这里是让输入框回显数据
      // this.password = this.user.password
      this.gender = this.user.gender
      // console.log(22)
    },
  },
}
</script>

<style lang="less" scoped>
.avatar {
  padding: 40px 0;
  text-align: center;
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .van-uploader {
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translate(-50%);
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}
/*
  深度作用选择器有三种写法
  >>>  css的写法
  /deep/  less的写法
  ::v-deep  scss的写法
*/
/deep/ .van-dialog__content {
  padding: 15px !important;
  .van-field {
    border: 1px solid #ccc;
  }
}

.mask {
  width: 100%;
  height: 100%;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  .crop,
  .cancel {
    position: fixed;
    top: 0;
    z-index: 1;
  }

  .cancel {
    right: 0;
  }
}
</style>
